<script setup lang="ts">
import { jumpChat } from "@/utils/loginTIm";
import { computed, ref } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const show = ref<boolean>(false);
const props = defineProps({
  shopIds: {
    type: Array,
    default: () => [],
  },
});

const options = computed(() => {
  return (props.shopIds as ShopCartOrder[]).map((item) => {
    return {
      text: item.shopName,
      value: item.syhShopId || item.shopId,
    };
  });
});

const toChat = (shopId: string, prodId: string) => {
  console.log(props.shopIds);
  if (props.shopIds.length > 0) {
    show.value = true;
  } else {
    jumpChat(shopId, "prod", prodId);
  }
};

const onConfirm = (val: any) => {
  console.log("onConfirm", val.options.value);
  show.value = false;
  jumpChat(val.options.value);
};
const onClose = () => {
  show.value = false;
  console.log("onClose");
};
</script>

<template>
  <view
    class="chat"
    @click="toChat($attrs.shopId as string, $attrs.prodId as string)"
  >
    <image mode="widthFix" src="@/static/image/chat02.png"></image>
    <fui-select
      :show="show"
      :options="options"
      :title="t('common.PleaseChooseAStore')"
      @confirm="onConfirm"
      @close="onClose"
      :btnText="t('common.confirm')"
      btnBackground="$subject-color"
    ></fui-select>
  </view>
</template>

<style lang="scss" scoped>
.chat {
  z-index: 10;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.09);
  right: 20px;
  bottom: 15%;
  position: fixed;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;

  image {
    width: 24px;
  }
}
</style>
